<script lang="ts" setup>
import router from '@/router';
import { useProjectStore } from '@/stores/projectData.ts';
import { HomeOutlined } from '@ant-design/icons-vue';

// 面包屑
const breadcrumb = [
  { label: '首页', path: '/' },
  { label: '项目概况', path: '' },
];

// Pinia
const ProjectStore = useProjectStore();

const updateProject = () => {
  ProjectStore.updateProjectData();
};
updateProject();

// 返回上一页
const goBack = () => {
  router.back();
};

// 跳转到详细页面
const goToDetailPage = (id: string) => {
  router.push({ name: 'XMDetailPage', params: { id } });
};
</script>

<template>
  <div class="mb-12 mt-5 flex flex-col">
    <!-- 表头工具栏 -->
    <div class="flex h-14 items-center justify-between gap-2 bg-white px-6">
      <div class="flex grow-[1] items-center gap-2">
        <HomeOutlined />
        <span>当前位置:</span>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index" :to="item.path">
            {{ item.label }}
          </el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="flex items-center gap-2">
        <span class="ml-4 cursor-pointer" @click="goBack">【返回上一页】</span>
      </div>
    </div>

    <!-- 表格 -->
    <div
      v-loading="ProjectStore.getProjectLoading"
      class="table-shadow mb-4 mt-4 min-h-[600px] bg-white p-6"
    >
      <a-list
        :data-source="ProjectStore.getProjectData"
        :loading="ProjectStore.getProjectLoading"
        :pagination="ProjectStore.pagination"
      >
        <template #renderItem="{ item }">
          <a-list-item class="cursor-pointer" @click="goToDetailPage(item.id)">
            <span class="text-base hover:text-blue-500">{{ item.title }}</span>
            <template #actions>
              <span>{{ item.time }}</span>
            </template>
          </a-list-item>
        </template>

        <!-- 头部定位 -->
        <template #header>
          <div class="absolute mt-[-30px] border-b border-[#cbcbcb] p-1 text-lg text-[#103588]">
            <strong>项目动态</strong>
          </div>
        </template>
      </a-list>
    </div>
  </div>
</template>

<style scoped>
.table-shadow {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
</style>
